import React ,{ Component } from 'react';

import { getDatas } from '../../../utils/tools';
import { SLIDER_TH } from '../../../config/table_config'

import SliderService from '../../../services/Slider';
import CommonService from '../../../services/Common';

import ListTitle from '../../../components/common/ListTitle';
import TableHeader from '../../../components/common/TableHead';
import TableBody from './TableBody';

import './index.scss';

const sliderService = new SliderService(),
      commonService = new CommonService();

export default class Slider extends Component {
    constructor (props) {
        super (props)
        
        this.state= {
            title: '轮播图管理',
            sliderData: []
        }
    }

    componentDidMount () {
      this.getSliderData();
    }

    async getSliderData() {

          const result = await sliderService.getSliderData(),
                errorCode = result.error_code,
                data = result.data,
                { history } = this.props;
       
               getDatas (errorCode, data, history, () => {
                    this.setState ({
                        sliderData: data
                    });
               });
    }

    //改变状态
    onStatusClick (id, index) {
        const  { sliderData } = this.state,
        status = sliderData[index].status;

       const cfm = window.confirm(`确认要${status ? '下架': '上架'}该轮播图吗?`)
       
       if (cfm) {
          switch (status) {
         case 1:
            sliderData[index].status = 0;
             break;
         case 0:
            sliderData[index].status = 1;
             break;
         default:
             break;
          }

          this.setState({
            sliderData: this.state.sliderData
           }, async () => {
               const result = await commonService.changeStatus({
                     id,
                     status: this.state.sliderData[index].status,
                     field: 'SLIDER'
                    });
               
               const errorCode = result.error_code;

               if (errorCode !== 0) {
                const status = this.state.sliderData[index].status;

                 alert(
                     status ? '该轮播上架失败' : '该轮播下架失败'
                 );
                 return;
               }
          });
       
       }
    }
    render () {
       
        const  { title, sliderData } = this.state;
    
        return (
            <div className="list-container">
            <ListTitle 
               title={ title }
               onRefreshData = {this.getSliderData.bind(this)}
               />
            <table className='list-table'>
                  <TableHeader thData={ SLIDER_TH }/>
                  <TableBody 
                     sliderData={ sliderData }
                     onStatusClick = { this.onStatusClick.bind(this)}
                 /> 
            </table>
         </div>
        )
    }
}